<template>
     <f7-card class="enterprise_card">
               <div class="card-wrap">
                       <img v-if="companyCardInfo.company" slot="media" round :src="companyCardInfo.company.url_logo" class="logo-ion" />
                        <h2 class="text-black" v-if="companyCardInfo.company">{{companyCardInfo.company.nick_name}}  <img src='../assets/img/label-v.png' class="label-v"> <i>企业名片</i></h2>
                        <h5 class="text-gray1">
                            采购：<span v-for="(item) in companyCardInfo.arrBuy">{{item}} </span>&nbsp
                            销售：<span v-for="(item) in companyCardInfo.arrSell">{{item}} </span>
                        </h5>
               </div>
               <div class="row" v-if="companyCardInfo.count">
                  <f7-col>
                      <h5>报价</h5>
                      <h5>{{companyCardInfo.count.DJ}}</h5>
                  </f7-col>
                  <f7-col>
                      <h5>竞价</h5>
                      <h5>{{companyCardInfo.count.JJ}}</h5>
                  </f7-col>
                   <f7-col>
                      <h5>采购</h5>
                      <h5>{{companyCardInfo.count.PURCHASE}}</h5>
                  </f7-col>
                   <f7-col>
                       <h5>运输</h5>
                      <h5>{{companyCardInfo.count.TRAFFIC}}</h5>
                   </f7-col>
             </div>

          <f7-block class="contact" v-if="companyCardInfo.company">
              <h5 class="text-gray1"><span class="bold">企业介绍:</span>{{companyCardInfo.company.des}}</h5>
            <h5 class="text-gray1 "><span class="bold">所在地区:</span> {{companyCardInfo.company.province}}- {{companyCardInfo.company.city}}</h5>
          </f7-block>
    </f7-card>
</template>

<script>
    export default {
        name: 'companyCard',
        props:['message'],
        data () {
            return {
                companyCardInfo: ''
            }
        },
        methods: {
            async getCompanyCard () {
                let param = {company_id:this.message}
                this.companyCardInfo = (await this.AccountService.getCompanyCard(param)).data.data
            }
        },
        watch:{
            message(val){
                if(val){
                   this.getCompanyCard(val)
                }
            }
        },
        mounted () {

        }
    }
</script>

<style scoped>
.enterprise_card{
      padding: 5px 0 20px 0 !important;
}
.card-wrap{
    position: relative;
    border: none;
    padding: 10px 10px 8px 70px;
    min-height: 0;
    border-bottom: 1px solid #f5f5f5;
}
.card-wrap h2 {
    color: #333;
    font-size: 14px;
    margin: 0;
}
.card-wrap h5 {
    color: #666;
    font-size: 12px;
    margin: 0;
    line-height: 18px;
}
.label-v{
    width: 24px;
    height: 14px;
    vertical-align: text-bottom;
    vertical-align: middle;
}
.card-wrap i{
    color: #e5e5e5;
    font-size: 12px;
    font-style:normal;
    font-weight: initial;
    float: right;
}
.row{
    margin-top: 10px;
    width: 100%;
}
.row h5{
    margin:0px;
    color: #333;
    font-weight: 400;
    text-align: center;
}
.contact{
    margin: 0px 15px !important;
    padding: 0 !important;
}
.text-gray1{
     margin: 0px;
    margin-top: 10px;
        color: #666;
        line-height: 20px;
        font-weight: inherit;
}
.ios .card-footer, .card-header{
    position: initial;
}

.logo-ion{
    position: absolute;
      top: 16px;
      left: 12px;
      width: 48px;
    height: 48px;
    border-radius: 100%;
}
.bold{
  color: #000;
  font-weight: bold;
  font-size: 14px;
}
</style>
